<template>
  <!-- 圈子成员帖子列表 -->
  <view class="main">
    <view class="top1">
      <view class="left" @tap="handleFanhui">
        <image src="../../imges/fanhuib.png" mode="aspectFill"></image>
      </view>
      <view class="right">
        <view class="one">
          <image :src="quanDetail.orgUrl" mode="aspectFill"></image>
        </view>
        <view class="two">
          <view class="first">
            {{ quanDetail.orgName }}
          </view>
          <view class="second">
            <text>圈主</text>{{ quanDetail.applyName }}&nbsp;&nbsp; 成员{{
              quanDetail.peopleNumber
            }}&nbsp; 帖子{{ quanDetail.postNumber }}
          </view>
        </view>
      </view>
    </view>
    <view class="name_">
      <view class="left">
        <image :src="img" mode="aspectFill"></image>
        <text>{{ name }}</text>
      </view>
      <view class="right">
        共 <text>{{ total }}</text> 个帖子
      </view>
    </view>
    <!-- 列表展示 -->
    <view class="child1">
      <!-- 最新没有帖子的空状态 -->
      <view class="wu_Huo" v-if="newQList.length == 0">
        <image src="../../imges/wuhuodong.png" mode="aspectFill"></image>
        <text>暂无帖子</text>
      </view>
      <!-- 贴子部分 -->
      <view class="child2" v-for="(item, index) in newQList" :key="index">
        <!-- 下隔线 -->
        <view class="xian"></view>
        <!-- 顶部信息 -->
        <view class="top">
          <view class="left">
            <navigator
              :url="'/pages/index/personal?id=' + item.createUid"
              class="one"
              hover-class="none"
            >
              <image :src="item.avatarUrl"></image>
            </navigator>

            <!-- 进帖子详情 -->
            <navigator
              :url="'/pages/index/trickDetail?id=' + item.id"
              hover-class="none"
            >
              <view class="two">
                <view class="top1">
                  {{ item.userName }} <text>{{ item.company }}</text>
                </view>
                <view class="bottom1">
                  {{ item.createTime }}
                </view>
              </view>
            </navigator>
          </view>
          <view class="right" @tap="showZhi(index)">
            <view class="one"> ... </view>
            <view class="two">
              <image
                src="../../imges/zhiding.png"
                mode="aspectFill"
                class="zhiding"
                v-if="item.isTop == 1"
              ></image>
              <image
                src="../../imges/jing.png"
                mode="aspectFill"
                class="jinghua"
                v-if="item.isEssences == 1"
              ></image>
            </view>
            <!-- 帖子弹窗 -->

            <view
              :class="[
                item.isTop == 1 || item.isEssences == 1
                  ? 'three66'
                  : 'three66 three666',
              ]"
              v-if="item.is_show"
            >
              <view class="jiao"> </view>
              <view
                hover-class="none"
                class="one1"
                v-if="item.isEssences == 0 && item.isAdmin == 1"
                @tap.stop="handleSerum(item.id, 1)"
              >
                设精华帖
              </view>
              <view
                hover-class="none"
                class="one1"
                v-if="item.isEssences == 1 && item.isAdmin == 1"
                @tap.stop="handleSerum(item.id, 0)"
              >
                取消精华帖
              </view>
              <navigator
                :url="'/pages/my_circle/report?id=' + item.id"
                class="one1"
                hover-class="none"
              >
                举报
              </navigator>

              <navigator
                :url="'/pages/newPost/newEditor?id=' + item.id"
                class="one1"
                hover-class="none"
                v-if="item.isSelf == 1"
              >
                编辑
              </navigator>

              <view
                class="one1"
                hover-class="none"
                v-if="item.isSelf == 1 || item.isAdmin == 1"
                @tap.stop="handleDelete(item.id, 2)"
              >
                删除
              </view>
            </view>
          </view>
        </view>
        <!-- 中间内容 及图片 -->
        <!-- 进帖子详情 -->
        <navigator
          :url="'/pages/index/trickDetail?id=' + item.id"
          hover-class="none"
        >
          <view class="text_">
            {{ item.content }} <text v-if="item.is_content">...</text
            ><text v-if="item.is_content" class="quan">全文</text>
          </view>
        </navigator>
        <!-- 图片显示 -->
        <view class="imgs">
          <!-- 多张照片 -->
          <image
            :src="item1.fileUrl"
            mode="aspectFill"
            v-for="(item1, index1) in item.imgCollection"
            :key="index1"
            v-if="
              item.imgCollection.length > 1 &&
              item1.fileType == 1 &&
              !item.is_video
            "
            @tap="imgsDa(item.imgCollection, index1)"
          ></image>
          <!-- 一张或者一个视频 -->
          <image
            class="myVideo"
            :src="item1.fileUrl"
            v-for="(item1, index1) in item.imgCollection"
            :key="index1"
            mode="aspectFill"
            @tap="imgsDa(item.imgCollection, index1)"
            v-if="item.imgCollection.length == 1 && item1.fileType == 1"
          ></image>
          <video
            class="myVideo"
            :src="item1.fileUrl"
            v-for="(item1, index1) in item.imgCollection"
            :key="index1"
            v-if="
              item.imgCollection.length > 1 &&
              item1.fileType == 3 &&
              item.is_video
            "
            :duration="item1.videoTime"
            :poster="item1.firstUrl"
          ></video>

          <video
            class="myVideo"
            :src="item1.fileUrl"
            v-for="(item1, index1) in item.imgCollection"
            :key="index1"
            v-if="item.imgCollection.length == 1 && item1.fileType == 3"
            :duration="item1.videoTime"
            object-fit="cover"
            controls
            :poster="item1.firstUrl"
          ></video>
        </view>
        <!-- 点赞评论 -->
        <view class="commit">
          <navigator
            :url="'/pages/index/trickDetail?id=' + item.id + '&type=2'"
            hover-class="none"
          >
            <view class="left">
              <image
                :src="item1"
                mode="aspectFill"
                v-for="(item1, index1) in item.thumbsList"
                :key="index1"
              ></image>
              <!-- 已赞显示 -->
              <text v-if="item.thumbsList.length == 5">已赞</text>
              <text v-if="item.thumbsList.length == 4" class="four">已赞</text>
              <text v-if="item.thumbsList.length == 3" class="three">已赞</text>
              <text v-if="item.thumbsList.length == 2" class="two">已赞</text>
              <text v-if="item.thumbsList.length == 1" class="one">已赞</text>
            </view>
          </navigator>
          <view class="right">
            <view class="one">
              <image
                src="../../imges/zan.png"
                mode="aspectFill"
                v-if="item.isThumbs == 1"
                @tap="handleZan(item.id, 1)"
              ></image>
              <image
                src="../../imges/zan1.png"
                mode="aspectFill"
                v-if="item.isThumbs == 0"
                @tap="handleZan(item.id, 0)"
              ></image>
              &nbsp;<text>{{ item.thumbsCount }}</text>
            </view>
            &nbsp;&nbsp;
            <navigator
              :url="'/pages/index/trickDetail?id=' + item.id"
              class="two"
              hover-class="none"
            >
              <image src="../../imges/pinglun.png" mode="aspectFill"></image>
              &nbsp;<text>{{ item.commentsCount }}</text>
            </navigator>
          </view>
        </view>

        <!-- 评论列表 -->
        <!-- 进帖子详情 -->
        <navigator
          :url="'/pages/index/trickDetail?id=' + item.id"
          hover-class="none"
        >
          <view class="commit_list">
            <view
              class="item"
              v-for="(item2, index2) in item.comments"
              :key="index2"
            >
              <text
                :class="[
                  item2.realName.length > 5 && item2.picturesUrl.length > 0
                    ? 'name name1'
                    : 'name',
                ]"
                >{{ item2.realName }}</text
              >
              <view class="img" v-if="item2.picturesUrl.length > 0">
                <image src="../../imges/chaimg.png" mode="aspectFill"></image>
                <text>查看图片</text>
              </view>
              <text class="t_comm">{{ item2.content }}</text>
            </view>
            <view class="footer" v-if="item.commentsCount != 0">
              查看全部{{ item.commentsCount }}条评论及回复 <text>></text>
            </view>
          </view>
        </navigator>
      </view>

      <view
        :class="[is_show == true ? 'main66' : '']"
        @tap.stop="showNo"
        @touchstart.stop.prevent="showNo"
      >
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      is_show: false,
      id: "", //圈子id
      uId: "", //用户id
      name: "",
      img: "",
      quanDetail: {},
      newQList: [],
      pageSize: 10,
      bottom: false,
      noMore: false,
      total: "",
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.uId = options.uId;
    this.name = options.name;
    this.img = options.img;
    this.quanDetailF(); //圈子主页
    this.handleList(); //列表
  },
  onReachBottom() {
    if (this.newQList.length == 0) {
      return false;
    }
    this.bottom = true;
    uni.showLoading({
      title: "加载中",
    });
    this.pageSize = this.pageSize + 10;
    this.handleList();
  },
  onPullDownRefresh() {
    this.pageSize = 10;
    this.bottom = false;
    this.noMore = false;
    setTimeout(() => {
      uni.stopPullDownRefresh();
      this.handleList();
      uni.showToast({
        title: "刷新成功",
        duration: 2000,
        icon: "none",
      });
    }, 1000);
  },
  onShow() {
    if (this.newQList.length != 0) {
      this.newQList.forEach((e) => {
        e.is_show = false;
      });
    }
    this.is_show = false;
    this.bottom = false;
  },
  methods: {
    showNo() {
      //点赞遮罩事件
      if (this.newQList.length != 0) {
        this.newQList.forEach((e) => {
          e.is_show = false;
        });
      }
      this.is_show = false;
    },
    showZhi(index) {
      this.bottom = false;
      //帖子操作
      if (this.newQList.length != 0) {
        this.newQList.forEach((e) => {
          e.is_show = false;
        });
      }
      this.is_show = true;
      this.newQList[index].is_show = true;
    },
    handleSerum(id, index) {
      this.bottom = false;
      //设置精华
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgMessage/updateIsEssences",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            isEssences: index,
            id: id,
          },
        }).then((res) => {
          // console.log(res, '设置精华')
          if (res.data.code == 200) {
            if (this.newQList.length > 0) {
              this.newQList.forEach((v) => {
                v.is_show = false;
              });
            }
            this.is_show = false;
            if (index == 1) {
              uni.showToast({
                title: "设置精华帖成功",
                duration: 1500,
                icon: "none",
              });
            } else {
              uni.showToast({
                title: "取消精华帖成功",
                duration: 1500,
                icon: "none",
              });
            }
            this.handleList();
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleDelete(id, index) {
      //删除帖子
      this.is_show = false;
      this.handleList();
      uni.showModal({
        title: "提示",
        content: "是否确定删除该条帖子",
        confirmColor: "#000000",
        cancelColor: "#007aff",
        cancelText: "再想想",
        success: (e) => {
          if (e.confirm) {
            let token = uni.getStorageSync("token");
            // console.log(token, 'token')
            if (!token) {
              uni.showToast({
                title: "请授权登录再操作！",
                duration: 2000,
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/index/index",
                });
              }, 2000);
            } else {
              request({
                url: "app/activity/orgDeleteAct?uid=",
                method: "post",
                header: {
                  "Content-Type": "application/json",
                  "api-client": "72e0fee8172411ea995200163e05ff66",
                  "api-version": "1.3.3",
                  "Source-Type": 7,
                  token: token,
                },
                data: {
                  relationId: id,
                  type: 13,
                  orgId: this.circleId,
                },
              }).then((res) => {
                // console.log(res, '删除帖子')
                if (res.data.code == 200) {
                  uni.showToast({
                    title: "删除成功",
                    duration: 1000,
                    icon: "none",
                  });
                  this.handleList();
                } else {
                  uni.showToast({
                    title: res.data.msg,
                    duration: 2000,
                    icon: "none",
                  });
                }
              });
            }
          }
        },
      });
    },
    handleZan(id, index) {
      //帖子点赞
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/appUserThumbs/thumbs",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            thumbsId: id,
            type: 13,
            status: index,
          },
        }).then((res) => {
          // console.log(res, '点赞')
          if (res.data.code == 200) {
            this.bottom = false;
            this.handleList();
            setTimeout(() => {
              if (index == 0) {
                uni.showToast({
                  title: "点赞成功",
                  duration: 1000,
                  icon: "none",
                });
              } else if (index == 1) {
                uni.showToast({
                  title: "取消点赞成功",
                  duration: 1000,
                  icon: "none",
                });
              }
            }, 2);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    imgsDa(imgs, index) {
      //点击图片放大
      // console.log(imgs,index)
      let arrImg = [];
      imgs.forEach((v) => {
        arrImg.push(v.fileUrl);
      });
      uni.previewImage({
        urls: arrImg,
        current: index,
        loop: true,
      });
    },
    handleList() {
      //圈子成员帖子列表
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/getUserPostList",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            pageSize: this.pageSize,
            pageNumber: 1,
            orgId: this.id,
            uid: this.uId,
          },
        }).then((res) => {
          // console.log(res, '圈子')
          if (res.data.code == 200) {
            this.newQList = res.data.data.rows.map((v) => {
              v.is_show = false;
              v.is_video = false;
              v.is_content = false;
              return v;
            });
            this.newQList.forEach((v) => {
              if (v.thumbsList.length >= 5) {
                v.thumbsList.length = 5;
              }
              if (v.comments.length >= 3) {
                v.comments.length = 3;
              }
              if (v.imgCollection.length > 0) {
                //不止一张
                v.imgCollection.forEach((value, index) => {
                  if (value.fileType == 3) {
                    //有视频
                    v.is_video = true;
                  }
                });
              }
              if (v.content.length > 75) {
                v.content = v.content.substring(0, 70);
                v.is_content = true;
              }
            });
            this.total = res.data.data.total;
            if (res.data.data.total == 0) {
              uni.hideLoading();
              return false;
            }
            if (
              !this.noMore &&
              this.newQList.length >= res.data.data.total &&
              this.bottom
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
              this.noMore = true;
              return false;
            }
            if (this.newQList.length >= res.data.data.total && this.bottom) {
              uni.hideLoading();
              uni.showToast({
                title: "没有更多数据了",
                duration: 1500,
                icon: "none",
              });
            } else if (
              this.newQList.length < res.data.data.total &&
              this.bottom
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    quanDetailF() {
      //圈子详情
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/friendsHomeInfo",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.id,
          },
        }).then((res) => {
          // console.log(res, '圈子主页')
          if (res.data.code == 200) {
            this.quanDetail = res.data.data;
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleFanhui() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.three66 {
  position: absolute;
  top: 90rpx;
  right: 35rpx;
  width: 180rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  z-index: 66666666;

  .one1 {
    padding: 15rpx 0;
    font-size: 28rpx;
    width: 100%;
    text-align: center;
    border-bottom: 2rpx solid #eee;
  }

  .one1:last-child {
    border-bottom: none;
  }

  .jiao {
    height: 0;
    width: 0;
    border-bottom: 15rpx solid #fff;
    border-left: 7.5rpx solid transparent;
    border-right: 7.5rpx solid transparent;
    position: absolute;
    right: 16rpx;
    top: -15rpx;
  }
}

.three666 {
  top: 55rpx;
}

.main66 {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.2);
}

.wu_Huo {
  margin-top: 400rpx;
  // padding-bottom: 300rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  image {
    width: 320rpx;
    height: 260rpx;
  }

  text {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(136, 136, 136, 1);
    line-height: 37px;
  }
}

.main {
  // height: calc(100vh - 176rpx);
  > .top1 {
    position: fixed;
    top: 0;
    left: 0;
    background: #176bd8;
    padding: 0 35rpx;
    padding-top: 20rpx;
    box-sizing: border-box;
    width: 750rpx;
    height: 140rpx;
    display: flex;
    align-items: center;
    z-index: 99;

    .left {
      width: 28rpx;
      height: 32rpx;
      display: flex;
      align-items: center;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .right {
      margin-left: 20rpx;
      display: flex;

      .one {
        width: 70rpx;
        height: 70rpx;
        margin-right: 12rpx;
        flex-shrink: 0;

        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .two {
        height: 70rpx;
        flex-direction: column;
        justify-content: space-between;

        .first {
          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
        }

        .second {
          position: relative;
          bottom: -6rpx;
          font-size: 18rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          display: flex;

          text {
            display: inline-block;
            width: 44rpx;
            height: 20rpx;
            margin-right: 8rpx;
            border-radius: 12rpx;
            border: 2rpx solid rgba(255, 255, 255, 1);
            text-align: center;
            line-height: 20rpx;
            font-size: 12rpx;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
          }
        }
      }
    }
  }

  .name_ {
    width: 750rpx;
    height: 236rpx;
    background: #f8f8fa;
    box-sizing: border-box;
    padding: 0 32rpx;
    padding-top: 140rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      display: flex;
      align-items: center;

      image {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        margin-right: 15rpx;
      }

      text {
        font-size: 22rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }

    .right {
      font-size: 22rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #464646;

      text {
        color: #2168eb;
      }
    }
  }
}

.child2 {
  margin-top: 30rpx;
  padding: 0 32rpx;
  padding-bottom: 22rpx;
  position: relative;
}

// 分割线
.child2 .xian {
  height: 2rpx;
  background-color: rgba(238, 238, 238, 1);
  width: 750rpx;
  margin-left: -32rpx;
  position: absolute;
  bottom: 0;
}

.child2 .xian:last-child {
  display: none;
}

// 省略号
.child2 .text_ {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(70, 70, 70, 1);
  margin-top: 20rpx;
  position: relative;
  // height: 130rpx;
  line-height: 42rpx;

  text {
    display: inline-block;
    // width: 20rpx;
    margin-left: 2rpx;
    font-size: 30rpx;
  }

  .quan {
    display: inline-block;
    margin-left: 10rpx;
    font-size: 22rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2168eb;
    line-height: 30rpx;
  }
}

// 图片
.child2 .imgs {
  // height: 220rpx;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  overflow: hidden;

  image {
    margin-top: 10rpx;
    width: 220rpx;
    height: 220rpx;
    border-radius: 8rpx;
    margin-right: 13rpx;
  }

  image:nth-child(3n) {
    margin-right: 0;
  }

  .myVideo {
    width: 100%;
    height: 400rpx;
  }
}

// 点赞评论
.child2 .commit {
  height: 44rpx;
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    font-size: 22rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    width: 500rpx;

    text {
      display: inline-block;
      margin-left: -60rpx;
      position: relative;
      top: -12rpx;
    }

    text.four {
      margin-left: -40rpx;
    }

    text.three {
      margin-left: -28rpx;
    }

    text.two {
      margin-left: -10rpx;
    }

    text.one {
      margin-left: 12rpx;
    }

    image {
      height: 44rpx;
      width: 44rpx;
      border-radius: 50%;
    }

    image:first-child {
      position: relative;
      z-index: 80;
    }

    image:nth-child(2) {
      position: relative;
      left: -20rpx;
      z-index: 70;
    }

    image:nth-child(3) {
      position: relative;
      left: -40rpx;
      z-index: 60;
    }

    image:nth-child(4) {
      position: relative;
      left: -60rpx;
      z-index: 50;
    }

    image:nth-child(5) {
      position: relative;
      left: -80rpx;
      z-index: 40;
    }
  }

  .right {
    display: flex;
    margin-top: 4rpx;

    .one image {
      width: 38rpx;
      height: 39rpx;
    }

    .two image {
      width: 38rpx;
      height: 35rpx;
      margin-left: 35rpx;
    }

    .one text,
    .two text {
      font-size: 22rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      margin-left: 6rpx;
      position: relative;
      top: -15rpx;
      // left : -8rpx;
    }
  }
}

// 评论列表
.child2 .commit_list {
  margin-top: 12rpx;
  background: rgba(248, 248, 250, 1);
  width: 100%;
  padding: 0 17rpx;
  box-sizing: border-box;

  .item {
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333ff;
    line-height: 37rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    .t_comm {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      width: 370rpx;
    }

    .name {
      color: rgba(80, 113, 173, 1);
      margin-right: 8rpx;
    }

    .name1 {
      width: 125rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }

    .img {
      display: flex;
      align-items: center;
      margin-right: 10rpx;

      image {
        margin-right: 7rpx;
        width: 30rpx;
        height: 25rpx;
      }

      text {
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #5071ad;
      }
    }
  }

  .footer {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(84, 116, 174, 1);
    line-height: 33rpx;

    text {
      display: inline-block;
      height: 16rpx;
      height: 10rpx;
      font-size: 30rpx;
      // position: relative;
      // bottom: -2rpx;
    }
  }
}

.child1 .child2 .top {
  display: flex;
  justify-content: space-between;

  > .right {
    .one {
      width: 30rpx;
      height: 6rpx;
      color: #333;
      font-weight: 700;
      margin-top: -16rpx;
      margin-right: 8rpx;
      // font-size: 50rpx;
      float: right;
    }

    .two {
      margin-top: 6rpx;
      position: relative;
      bottom: -20rpx;

      .zhiding {
        width: 54rpx;
        height: 30rpx;
        background: linear-gradient(
          319deg,
          rgba(244, 31, 48, 1) 0%,
          rgba(255, 101, 78, 1) 100%
        );
        border-radius: 8rpx;
        padding-right: 2rpx;
      }

      .jinghua {
        margin-left: 3rpx;
        width: 30rpx;
        height: 30rpx;
        background: linear-gradient(
          324deg,
          rgba(255, 164, 2, 1) 0%,
          rgba(253, 201, 0, 1) 100%
        );
        border-radius: 8rpx;
      }
    }
  }

  > .left {
    display: flex;

    .one {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .two {
      display: flex;
      flex-direction: column;
      height: 80rpx;
      justify-content: space-between;

      .top1 {
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        display: flex;
        align-items: center;

        > view {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }

        text {
          // width: 290rpx;
          display: inline-block;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
          line-height: 33rpx;
          margin-left: 15rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
      }

      .bottom1 {
        font-size: 22rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        margin-top: -10rpx;
        color: rgba(136, 136, 136, 1);
      }
    }
  }
}
</style>
